<template>
	<view class="container">
		<view class="title-container">{{qaObj.title}}</view>

    <view class="tip">
      <view>说明: 每道题只需填A选项(B选项会自动计算),满分5分</view>
      <view>
        <view>1．请在心态平和及时间充足的情况下才开始答题。</view>
        <view>2．每道题目均有两个答案：A和B。请仔细阅读题目，按照与你性格相符的程度分别给A和B赋予一个分数，并使一组中的两个分数之和为5。</view>
        <view>3．请注意，题目的答案无对错之分，你不需要考虑哪个答案“应该”更好，而且不要在任何问题上思考太久，而是应该凭你心里的第一反应做出选择。</view>
        <view>4．如果你觉得在不同的情境里，两个答案或许都能反映你的倾向，请选择一个对于你的行为方式来说最自然、最顺畅和最从容的答案。</view>
        <view>
          <view>例子：“你参与社交聚会时”</view>
          <view>A．总是能认识新朋友。（4）</view>
          <view>B．只跟几个亲密挚友呆在一起。（1）</view>
          <view>很明显，你参与社交聚会时有时能认识新朋友，有时又会只跟几个亲密挚友呆在一起，在以上的例子中，我们给总是能认识新朋友打了4分，而给只跟几个亲密挚友呆在一起打了1分。当然，在你看来，也可能是3+2或者5+0，也可以是其他的组合</view>
        </view>
      </view>

      <view>
        <view class="title">请在以下范围内一一对应地选择你对以下项目的赋值：</view>
        <view class="flex-b">最小 <view class="line"></view> 最大</view>
        <view class="flex-b line-number">
          <text></text>
          <text>0</text>
          <text>1</text>
          <text>2</text>
          <text>3</text>
          <text>4</text>
          <text>5</text>
          <text></text>
        </view>
      </view>

    </view>

		<template v-if="qaObj.questions.length>0">
			<view class="list" v-for="(item, index) in qaObj.questions">

        <template v-if="item.group==='title'">
          <view class="title">{{item.title}}</view>
        </template>

        <template v-else>
          <view class="title">{{item.title}}</view>
          <view class="ans">
            <view v-for="(option, indexSub) in item.options" class="flex-b ans2">
              <view class="">{{option.label}}</view>
              <view class="flex-b">
                <template v-if="indexSub===0">
                  <input type="text" class="score" :value="option.score" min="0" max="5"
                         @blur="calc($event,item.options)"/>分
                </template>
                <template v-else>
                  <input type="text" class="scoreB" :value="option.score" disabled />分
                </template>

              </view>
            </view>
          </view>
        </template>

			</view>
		</template>


<!--    基本信息-->
    <view class="blank"></view>
    <view class="part-title"></view>
    <view class="uni-form-item uni-column">
      <view class="part2-input-title">姓名</view>
      <input class="part2-input" v-model="username" placeholder="请输入姓名" />
    </view>
    <view class="uni-form-item uni-column">
      <view class="part2-input-title">性别</view>
<!--      <input class="part2-input" v-model="gender" placeholder="请选择性别" />-->
          <view class="uni-list-cell-db">
          <picker @change="bindPickerChange" :value="gender" :range="array">
            <view class="uni-input">{{array[gender]}}</view>
          </picker>
          </view>
    </view>

    <view class="uni-form-item uni-column">
      <view class="part2-input-title">年龄</view>
      <input class="part2-input" type="number" v-model="age" placeholder="请输入年龄" />
    </view>

    <view class="uni-form-item uni-column">
      <view class="part2-input-title">学校</view>
      <input class="part2-input" v-model="school" placeholder="请输入学校" />
    </view>

    <view class="uni-form-item uni-column">
      <view class="part2-input-title">专业</view>
      <input class="part2-input" v-model="specialty" placeholder="请输入专业" />
    </view>

    <view class="uni-form-item uni-column">
      <view class="part2-input-title">学历</view>
      <input class="part2-input" v-model="education" placeholder="请输入学历" />
    </view>

    <view class="uni-form-item uni-column">
      <view class="part2-input-title">手机号</view>
      <input class="part2-input" v-model="phone" placeholder="请输入手机号" />
    </view>


    <view class="blank"></view>
    <view class="btn-submit" @click="submitForm">提交并查看结果</view>

<!--    结束-->
	</view>
</template>

<script>
	import {
		qaList
	} from "@/pages/data-hr.js"
  import {request} from "@/utils/requestV2";
	export default {
    data() {
      return {
        loading: false,
        qaObj: {},
        age: 0,
        gender: 1,
        username: '',
        array: ["男", "女"],
        school: '',
        specialty: '',
        education: '',
        phone: '',
      }
    },
    onLoad() {
      this.qaObj = qaList
    },
    methods: {
      calc(event, options) {
        let inputValue = event.target.value;
        console.log(inputValue, options);
        if(inputValue!==""){
          let num1=parseInt(inputValue)
          let numbArr=[0,1,2,3,4,5]
          if(!numbArr.includes(num1)){
            uni.showToast({
              icon: "none",
              title: "填写的数字必须是[0-5]里面的整数"
            })
           return
          }
          options[0].score = num1
          options[1].score = this.qaObj.score - num1
        }
      },
      bindPickerChange(e) {
        this.gender = e.detail.value
        console.log("=======bindPickerChange===this.gender=======>",this.gender)
      },

      //
      async submitForm() {

        //数据校验
        for (const question of this.qaObj.questions) {
          console.log("============qq=====>",question)
          if(question.group!=="title"){
            if(question.options[0].score==0 && question.options[1].score==0){
              uni.showToast({
                icon: "none",
                title: `题目"${question.title}"为必填项`,
              })
              return
            }
          }
        }

        if (this.loading) {
          uni.showToast({
            icon: "none",
            title: "请勿重复提交"
          })
          return
        }

        if (!this.username) {
          uni.showToast({
            icon: "none",
            title: "姓名不能为空"
          })
          return
        }

        if (!this.age) {
          uni.showToast({
            icon: "none",
            title: "年龄不能为空"
          })
          return
        }

        if(!this.school || !this.specialty|| !this.education){
          uni.showToast({
            icon: "none",
            title: "学校,专业,学历不能为空"
          })
          return
        }

        const phoneRegex = /^1\d{10}$/
        if(! phoneRegex.test(this.phone)){
          uni.showToast({
            icon: "none",
            title: "手机号填写错误"
          })
          return
        }

        this.loading = true
        let ssListA = this.qaObj.questions.filter(ele => ele.group === 1)
        let ssListB = this.qaObj.questions.filter(ele => ele.group === 2)
        let ssListC = this.qaObj.questions.filter(ele => ele.group === 3)
        let ssListD = this.qaObj.questions.filter(ele => ele.group === 4)

        console.log("========ssListA=========>", ssListA)
        console.log("========ssListB=========>", ssListB)
        console.log("========ssListC=========>", ssListC)
        console.log("========ssListD=========>", ssListD)

        let ee = 0
        let ii = 0
        ssListA.forEach(item => {
          ee += parseInt(item.options[0].score || 0)
          ii += parseInt(item.options[1].score || 0)
        })

        let ss = 0
        let nn = 0
        ssListB.forEach(item => {
          ss += parseInt(item.options[0] .score || 0)
          nn += parseInt(item.options[1] .score || 0)
        })

        let tt = 0
        let ff = 0
        ssListC.forEach(item => {
          tt += parseInt(item.options[0] .score || 0)
          ff += parseInt(item.options[1] .score || 0)
        })

        let jj = 0
        let pp = 0
        ssListD.forEach(item => {
          jj += parseInt(item.options[0] .score || 0)
          pp += parseInt(item.options[1] .score || 0)
        })

        //save
        let payload = {
          qaData: JSON.stringify(this.qaObj),
          username: this.username,
          age: this.age,
          gender: this.gender === 0 ? "1" : "2",
          ee: ee,
          ii: ii,
          ss: ss,
          nn: nn,
          tt: tt,
          ff: ff,
          jj: jj,
          pp: pp,
          school: this.school,
          specialty: this.specialty,
          education: this.education,
          phone: this.phone
        }

        console.log("========payload=========>", payload)
        let res = await request("/buss/stuqa/addqa", payload, "POST")
        this.loading = false
        console.log("=========res========>", res)

        if (res.code === 200) {
          uni.showToast({
            title: "提交成功"
          })
          setTimeout(function () {
            uni.navigateTo({
              url: "/pages/qa-res?id=" + res.msg
            })
          }, 1500)
        } else {
          uni.showToast({
            icon: "none",
            title: res.msg
          })
        }

      }

//
    }
  }
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
    padding: 30px 15px;
	}

  .title-container {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
  }

  .tip{
    background-color: #fdcdcd;
    padding: 15px;
    line-height: 30px;
  }

  .title{
    font-size: 14px;
    color: #333;
    font-weight: bold;
  }

	.list {
		padding: 10px 0;
		border-bottom: 1px solid #999;
    line-height: 30px;
	}

	.flex-b {
		display: flex;
		align-items: center;
	}

	.ans2 {
		font-size: 12px;
		padding-left: 20px;
	}

	.score {
		width: 25px;
		height: 25px;
		border: 1px solid #999;
		text-align: center;
	}

	.scoreB {
		width: 25px;
		height: 25px;
		border: 1px solid #999;
		background-color: #f0f0f0;
		text-align: center;
	}

  .blank {
    height: 15px;
  }
  .part-title{
    font-size: 14px;
  }
  .part2-input-title{
    padding: 10px 0;
  }
  .part2-input{
    border: 1px solid #999;
    padding: 5px 10px;
  }

  .uni-input{
    padding: 0 10px;
  }

  .uni-list-cell-db{
    border: 1px solid #999;
    padding: 5px 0;
  }

  .btn-submit{
    padding: 15px 0;
    background-color: #42b983;
    text-align: center;
    color: #ffffff;
  }

  .line{
    flex: 1;
    height: 1px;
    border-bottom: 1px dashed #999;
    margin: 0 20px;
  }
  .line-number{
    justify-content: space-between;
  }
</style>